<template>
  <van-swipe class="my-swipe" :autoplay="3000" @change="onChange" :loop="false">
    <van-swipe-item v-for="item in swiper_val" :key="item.imageId">
        <img  :src="item.imageSrc" class="J-scroll-exclude">
    </van-swipe-item>

    <template #indicator>
        <div class="custom-indicator">
        {{ current + 1 }} / {{swiper_val.length}}
        </div>
    </template>
  </van-swipe>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
    props:['val'],
    data(){
        return{
            current : 0,
            swiper_val:""
        } 
    },
    methods:{
        onChange(index) {
            this.current = index;
        },
    },
    watch:{
        val(){
            this.swiper_val = this.val
        }
    }
}
</script>

<style lang='stylus' scoped>
.custom-indicator 
    position: absolute;
    right: 0.05rem;
    bottom: 0.05rem;
    font-size: 0.12rem;
    width: 0.54rem;
    height: 0.22rem;
    border-radius: 0.11rem;
    line-height: 0.2rem;
    background: rgba(0,0,0,0.3);
    text-align center
    color white
    font-size 0.12rem
.my-swipe
    img 
        width 100%
    margin-top 40px
    min-height 4rem
</style>